<template>
	<view class="" :style="{'overflow':show?'hidden':'visible'}">
		<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
		
		<view class="fiexd-nav" :class="isBg?'bg-content':''">
			<uni-nav-bar left-icon="left"  @clickLeft="back" :title="detailData.scenicName" backgroundColor="rgba(0,0,0,0)" :color="isBg?'#333':'#fff'"></uni-nav-bar>
		</view>
		<view class="imgs-content">
			<swiper @change="swiperchange" class="image-swiper" :current="current">
				<swiper-item class="item-images-swiper" v-for="(item,index) in detailData.images"   :key="index">
					<view class="swiper-item">
						<image :src="item"  @error="imageError($event,index)" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="all-nums" @click="allImg">
				<view class="nums" v-if="detailData.images">{{current+1}}/{{detailData.images.length}}</view>
				<image class="img-icon" src="https://qiniu-cdn.maeiyun.com/imgs/hotel/imgs.png" mode=""></image>
				<view class="right-icon"></view>
			</view>
		</view>
		
		<view class="scenic-spot-details-content">
			<view class="hotel-info">
				<view class="hotel-name">{{detailData.scenicName}}</view>
				<view class="hotel-date">
					<view class="pingfen">
						<uni-rate size="14" :value="detailData.commentScore" readonly="" color="#bbb" active-color="red" />
						<view class="pingfen-num">{{detailData.commentScore >= '5'?'5.0':detailData.commentScore}}</view>
						<view class="commont-lines" @click="toEval">{{detailData.content_num}}条评论 ></view>
					</view>
					<view class="location-comment">
						<view class="left-local">
							<view class="nums">{{detailData.scenicAddress}}</view>
							<view class="juli">{{detailData.distance>0?detailData.distance/1000:0}}km</view>
						</view>
						<view class="right-info">
							<view class="" style="margin-right: 31rpx;" @click="openLoaction">
								 <image src="https://qiniu-cdn.maeiyun.com/imgs/lvyou/address.png" mode=""></image>
								 <view>地图</view>
							</view>
							<!-- <view class="" @click="callPhone">
								 <image src="https://qiniu-cdn.maeiyun.com/imgs/lvyou/p1.png" mode=""></image>
								 <view>电话</view>
							</view> -->
						</view>
					</view>
				</view>
				<view class="infos-content">
					<view class="left-infos">
						{{detailData.openTime}}
					</view>
					<view class="lines">
						
					</view>
					<view class="right-infos" style="padding-bottom: 30rpx;">
						{{detailData.recommend}}
					</view>
				</view>
				
			</view>
	
			<view class="scenic-spot-introduction">
				<view class="titles">
					<image src="https://qiniu-cdn.maeiyun.com/imgs/lvyou/jingdian.png" mode=""></image>
					<view>景区介绍</view>
				</view>
				<view class="introduction">
					<roc-text :content="detailData.scenicDescription"></roc-text>
				</view>
			</view>
			<view class="tickets-content">
				<view class="item-tickets" v-for="(item,index) in detailData.ticketProducts" :key="index">
					<view class="left-info">
						<view class="tickets-title">{{item.productName}}</view>
						<!-- <view class="min-hint">{{item.}}</view> -->
						<view class="min-hint">
							<!-- <view>{{detailData.themeGroups}}</view> -->
							<!-- <view class="lines"></view>
							<view>无需取票</view> -->
						</view>
						<view class="tits">
							<view class="item-tit">
								{{item.isNeedGetTicket?'需取票':'无需取票'}}
							</view>
						</view>
						<view class="xuzhi" @click="showPopup(item)">
							预订须知
							<uni-icons color="#7F7F81" type="right" size="14"></uni-icons>
						</view>
					</view>
					<view class="right-info">
						<view class="price"><text>￥</text>{{item.settlePrice}}<text>元</text></view>
						<view class="draw-up" @click="showPopup(item)">
							抢购
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- </page-meta> -->
		<uni-popup ref="popupScenicDetail">
			<view class="popupscenic-content inner-content" v-if="ticketData.productName">
				<view class="fixed-title">
					<view class="popup-title">{{ticketData.productName}}</view>
					<view class="popup-tit-list">
						<view class="score-lines">
							<view class="pingfen">
								<view>{{detailData.commentScore}}</view>
								<view style="color: #FF7E54;">高评分</view>
							</view>
							<view class="guanfang">{{ticketData.refundTypeShowText}}</view>
						</view>
					</view>
				</view>

				<image @click="closePopup" class="close-img" src="https://qiniu-cdn.maeiyun.com/imgs/hotel/close.png"
					mode=""></image>
				<scroll-view scroll-y style="height: 1000rpx;">

					<view class="notice-content" v-if="ticketData.bookNotice">
						<view class="notice-title">
							预订说明
						</view>
						<view class="condition-content" style="display: flex;align-items: baseline;"
							v-for="(item,index) in ticketData.bookNotice" :key="index">
							<view class="condition-title">
								{{item.name}}
							</view>
							<view class="notice-info">
								{{item.value}}
							</view>
						</view>
						<view class="condition-content" style="display: flex;align-items: baseline;">
							<view class="condition-title">
								预定数量
							</view>
							<view class="notice-info">
								最少预定{{ticketData.minBuyCount}}张,最多预定{{ticketData.maxBuyCount}}张
							</view>
						</view>
						<view class="condition-content" style="display: flex;align-items: baseline;">
							<view class="condition-title">
								单位人数
							</view>
							<view class="notice-info">
								每份门票限{{ticketData.unitQuantity}}使用
							</view>
						</view>
						<view class="condition-content" style="display: flex;align-items: baseline;">
							<view class="condition-title">
								下单说明
							</view>
							<view class="notice-info">
								<!-- 0：不需要取票人信息，1：取票人姓名+手机号，2：取票人姓名+手机号+证件类型+证件号） -->
								{{ticketData.contactInfoType == 0?'不需要取票人信息':ticketData.contactInfoType == 1?'取票人姓名+手机号':ticketData.contactInfoType == 2?'取票人姓名+手机号+证件类型+证件号':''}}
							</view>
						</view>
					</view>
					<view class="notice-content" v-if="ticketData.refundChangeRule">
						<view class="notice-title">
							退改说明
						</view>
						<view class="condition-content" v-for="(item,index) in ticketData.refundChangeRule"
							:key="index">
							<view class="condition-title">
								{{item.name}}
							</view>
							<view class="notice-info">
								<view class="hint-text">
									<rich-text :nodes="item.value"></rich-text>
								</view>
							</view>
						</view>
					</view>
					<view class="notice-content">
						<view class="notice-title">
							费用说明
						</view>
						<view class="condition-content" v-for="(item,index) in ticketData.costDescription" :key="index">
							<view class="condition-title">
								{{item.name}}
							</view>
							<view class="notice-info">
								<view class="hint-text">
									<rich-text :nodes="item.value"></rich-text>
								</view>
							</view>
						</view>
					</view>
					<view class="notice-content">
						<view class="notice-title">
							使用说明
						</view>
						<view class="condition-content" v-for="(item,index) in ticketData.useDescription" :key="index">
							<view class="condition-title">
								{{item.name}}
							</view>
							<view class="notice-info">
								<view class="hint-text">
									<rich-text :nodes="item.value"></rich-text>
								</view>
							</view>
						</view>
					</view>
					<view class="notice-content">
						<view class="notice-title">
							其他说明
						</view>
						<view class="condition-content" v-for="(item,index) in ticketData.otherDescription"
							:key="index">
							<view class="condition-title">
								{{item.name}}
							</view>
							<view class="notice-info">
								<view class="hint-text">
									<rich-text :nodes="item.value"></rich-text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="price-lines">
					<view class="prcies">
						<text>￥</text>
						{{ticketData.settlePrice}}
					</view>
					<view class="reserve-btn" @click="reserve()">
						预定
					</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import {wgs84_to_gcj02} from '../../common/js/wgs84_to_gcj02.js'
	import publicData from './public.js'
	import { mapState } from 'vuex'//引入mapState
	export default {
		computed: {
			  ...mapState({'userLocation':'userLocation'}),
		},
		data() {
			return {
				current: 0,
				id: "",
				detailData: {},
				ticketData: {},
				show: false,
				locationData:{},
				isBg:false
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
		},
		onBackPress(from) {
			if(this.show){
				this.show = false
				this.$refs.popupScenicDetail.close()
				return true; // 此处返回 true 表示阻止页面跳转或关闭
			}else{
				return false; // 此处返回 true 表示阻止页面跳转或关闭
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			toEval(){
				uni.navigateTo({
					url:'/otherpages/hotel/eval?id='+this.detailData.scenicId
				})
			},
			openLoaction() {
				uni.openLocation({
					latitude: this.detailData.latitude,
					longitude: this.detailData.longitude,
					name: this.detailData.scenicName,
					address: this.detailData.scenicAddress,
					success: function() {
						// console.log('success');
					}
				});
			},
			callPhone(){
				uni.makePhoneCall({
					phoneNumber: this.detailData.phone
				});
			},
			showPopup(item) {
				this.show = true
				this.getTickets(item)
			},
			changeImg(item) {
				this.show = true
				this.current = item.id;
				this.$refs.roompopup.open('bottom')
			},
			closePopup() {
				this.show = false
				this.$refs.popupScenicDetail.close()
			},
			swiperchange(data){
				this.current = data.detail.current
			},
			allImg() {
				uni.navigateTo({
					url: '/otherpages/travelStrategy/travelImages'
				})
			},
			imageError(e,index){
				this.detailData.images[index] ='https://qiniu-cdn.maeiyun.com/imgs/hotel/error-1.png'
				
			},
			reserve() { // 预定
				publicData.scenicAreaData = this.detailData
				publicData.ticketsData = this.ticketData
				uni.navigateTo({
					url: '/otherpages/travelStrategy/creatOrder'
				})
			},
			getDetail() {
				let that = this
				this.request.httpTokenRequest({
					url: "ticket/read",
					method: "get"
				}, {
					scenicID: this.id,
					longitude: this.userLocation.longitude,
					latitude: this.userLocation.latitude,
				}).then(res => {
					if (res.code == 0) {
						that.detailData = res.data
						publicData.Imags = res.data.images

					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			getTickets(item) {
				let that = this
				uni.showLoading({
					title: '加载中'
				});
				this.request.httpTokenRequest({
					url: "ticket/getTicketDetail",
					method: "get"
				}, {
					productId: item.productId,
					
				}).then(res => {
					if (res.code == 0) {
						this.ticketData = res.data
						this.show = true
						this.$refs.popupScenicDetail.open('bottom')
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					} else {
						this.show = false
						this.$refs.popupScenicDetail.close()
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			}
		},
		onPageScroll(e) {
			if(e.scrollTop>100){
				this.isBg = true
			}else{
				this.isBg = false
			}
		}
	}
</script>

<style lang="scss">
	@import "../../common/css/helang-table.scss";

	.fiexd-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		padding-top: var(--status-bar-height);
	}
	.bg-content{
		background: rgb(245, 247, 248);
	}
	.imgs-content {
		width: 100%;
		height: 525rpx;
		position: relative;

		.image-swiper {
			height: 525rpx;

			.item-images-swiper {
				height: 525rpx;

				image {
					height: 525rpx;
				}
			}
		}

		.all-nums {
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 73rpx;
			right: 30rpx;
			height: 42rpx;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 20rpx;
			padding: 0 16rpx;

			.nums {
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			.img-icon {
				width: 24rpx;
				height: 24rpx;
				margin: 0 9rpx;
			}

			.right-icon {
				border-style: solid;
				border-color: transparent;
				border-width: 10rpx 0 10rpx 10rpx;
				border-left-color: #FFFFFF;
			}
		}
	}
	.hotel-info{
		background-color: #FFFFFF;
		padding: 20rpx 30rpx 0 30rpx;
		
		border-radius: 20rpx;
		z-index: 20;
		position: relative;
		margin-bottom: 20rpx;
		.hotel-name{
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #2A2B2E;
			line-height: 40rpx;
		}
		.hotel-date{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 29rpx;
		}
		.pingfen {
			width: 208rpx;
			height: 146rpx;
			background: url('https://qiniu-cdn.maeiyun.com/imgs/hotel/a2.png')no-repeat;
			background-size: 100% 100%;
			font-size: $uni-font-size-sm;
			color: #FFFFFF;
			align-items: baseline;
			box-sizing: border-box;
			// flex:  0 0 auto;
			padding-top: 25rpx;
			padding-left: 23rpx;
			.pingfen-num{
				width: 67rpx;
				height: 32rpx;
				background: url('https://qiniu-cdn.maeiyun.com/imgs/hotel/b1.png')no-repeat;
				background-size: 100% 100%;
				text-align: center;
				line-height: 32rpx;
				font-size: $uni-font-size-base;
				margin-top: 10rpx;
			}
			.commont-lines{
				font-size: $uni-font-size-sm;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #EF5233;
				line-height: 30rpx;
				margin-top: 7rpx;
			}
		}
		.location-comment{
			// flex-grow: 1;
			display: flex;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #969696;
			width: 460rpx;
			height: 146rpx;
			background: #FDF8F3;
			background-size: 100% 100%;
			border-radius: 4rpx;
			padding: 30rpx;
			box-sizing: border-box;
			.left-local{
				width: 80%;
				.nums{
					font-size: $uni-font-size-base;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #656667;
					line-height: 29rpx;
					 display: -webkit-box;
					  -webkit-line-clamp: 2; /* 设置显示的行数 */
					  -webkit-box-orient: vertical;
					  overflow: hidden;
					  text-overflow: ellipsis;
				}
				.juli{
					font-size: $uni-font-size-sm;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #969696;
					line-height: 30rpx;
					margin-top: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.right-info{
				margin-left: 24rpx;
				display: flex;
				align-items: center;
				font-size: $uni-font-size-sm;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #656667;
				line-height: 30rpx;
				text-align: center;
				image {
					width: 56rpx;
					height: 56rpx;
				}
				.price{
					
				}
			}
			
		}
		
		.infos-content{
			// display: flex;
			// align-items: center;
			margin-top: 23rpx;
			
			.left-infos{
				font-size: $uni-font-size-base;
				font-weight: 400;
				color: #707070;
				flex: 0 0 auto;
				// .open-status{
				// 	font-size: $uni-font-size-base;
				// 	font-weight: 400;
				// 	color: #35A783;
				// 	line-height: 33rpx;
				// }
				// .open-times{
				// 	font-size: $uni-font-size-sm;
				// 	font-family: PingFangSC, PingFang SC;
				// 	font-weight: 400;
				// 	color: #898A8B;
				// 	line-height: 30rpx;
					
				// }
			}
			.lines{
				width: 100%;
				height: 1rpx;
				background-color: #E0E0E0;
				// border: 1rpx solid #E0E0E0;
				margin:20rpx 0;
			}
			.right-infos{
				flex-grow:1;
				font-size: $uni-font-size-base;
				font-weight: 400;
				color: #707070;
				line-height: 30rpx;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
		}
		
	}
	.scenic-spot-details-content {
		background-color: #F5F7F8;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		margin-top: -40rpx;
		position: relative;

		.title {
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: bold;
			color: #2A2B2E;
		}

		.star-level {
			display: flex;
			align-items: center;
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #888889;
			margin: 19rpx 0;

			image {
				width: 19rpx;
				height: 18rpx;
			}
		}



		.scenic-area-info {
			display: flex;
			align-items: center;
			font-size: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #585858;
			margin-bottom: 20rpx;

			.times-lines {
				// margin-left: 30rpx;
				display: flex;
				align-items: center;

				.lines {
					width: 1rpx;
					height: 16rpx;
					border: 1rpx solid #979797;
					margin: 0 9rpx;
				}
			}

			.right-info {
				margin-left: auto;
				display: flex;
				align-items: center;

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}

		}

		.scenic-spot-introduction {
			// padding: 30rpx 0;
			background-color: #FFFFFF;
			min-height: 270rpx;

			.titles {
				height: 88rpx;
				background: linear-gradient(180deg, #F0E0D7 0%, #FFFFFF 100%);
				border-radius: 10rpx 10rpx 0rpx 0rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #8C654A;

				image {
					width: 31rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}
			}

			.introduction {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #2A2B2E;
				padding: 0 30rpx 30rpx;
				margin-top: -10rpx;
				view {
					font-size: 22rpx;
					color: #707070;
				}
			}
		}
	}

	//选择日期
	.date-content {
		margin-top: 30rpx;
		margin-bottom: 30rpx;

		.date-type {
			display: flex;
			align-items: center;

			.date {
				padding: 13rpx 24rpx;
				background-color: #EBEBEB;
				border-radius: 10rpx;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #323232;
				margin-right: 20rpx;
			}

			.selcet-date {
				border: 1rpx solid #EF5233;
				background-color: #F4E5E3;
				color: #EF5233;
			}
		}
	}

	//星级
	.score-lines {
		display: flex;
		align-items: center;
		margin: 20rpx 0;

		.pingfen {
			width: 127rpx;
			background: url('https://qiniu-cdn.maeiyun.com/imgs/lvyou/bg.png')no-repeat;
			background-size: 100% 100%;
			font-size: 20rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 8rpx;
			height: 30rpx;
			line-height: 30rpx;
		}

		.nums {
			font-size: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #656667;
			margin-left: 18rpx;
		}
	}

	//门票
	.tickets-content {
		margin-top: 21rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		.item-tickets {
			background-color: #FFFFFF;
			box-shadow: 0rpx 0rpx 4rpx 4rpx rgba(100,100,100,0.06);
			height: 260rpx;
			padding: 33rpx 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			position: relative;
			.left-info {
				width: 100%;
				.tickets-title {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: bold;
					color: #0F0807;
				}

				.min-hint {
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #888889;
					display: flex;
					align-items: center;
					margin-top: 14rpx;

					.lines {
						width: 1rpx;
						height: 20rpx;
						border: 1rpx solid #BFBFBF;
						margin: 0 10rpx;
					}
				}

				.tits {
					display: flex;
					flex-wrap: wrap;
					margin: 10rpx 0;
					.item-tit {
						font-size: $uni-font-size-sm;
						font-weight: 400;
						color: #6985C2;
						height: 30rpx;
						line-height: 30rpx;
						padding: 0 10rpx;
						border-radius: 6rpx;
						border: 2rpx solid #7E9CE1;
						margin-right: 10rpx;
					}
				}

				.xuzhi {
					display: flex;
					align-items: center;
					font-size: $uni-font-size-base;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #7F7F81;
				}
			}

			.right-info {
				position: absolute;
				right: 28rpx;
				bottom: 29rpx;
				margin-left: auto;
				margin-right: 20rpx;
				text-align: center;

				.price {
					font-size: 34rpx;
					font-weight: bold;
					color: #EF5233;
					text{
						font-size: $uni-font-size-base;
						font-weight: normal;
					}
				}

				
				.draw-up {
					width: 120rpx;
					height: 50rpx;
					background: #EF5233;
					border-radius: 10rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 50rpx;
					margin: 0 auto;
				}
			}
		}
	}

	//预定须知弹窗
	.popupscenic-content {
		background-color: #F5F7F8;
		position: relative;
		padding-bottom: 140rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		.inner-content {
			padding: 30rpx;
		}
		.fixed-title {
			padding: 30rpx 30rpx 0 30rpx;
		}
		.popup-title {
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #2A2B2E;
			width: 90%;
		}
		.guanfang {
			width: 68rpx;
			border-radius: 13rpx;
			border: 1rpx solid #CCCCCC;
			font-size: 20rpx;
			font-weight: 400;
			color: #585858;
			text-align: center;
			margin-left: 20rpx;
		}

		.close-img {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		.notice-content {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 34rpx;

			.notice-title {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #585858;
			}

			.condition-content {
				display: flex;
				align-items: flex-start;
				margin-top: 30rpx;

				.condition-title {
					width: 140rpx;
					height: 40rpx;
					border-radius: 10rpx;
					border: 1rpx solid #DB8325;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #DB8325;
					text-align: center;
					line-height: 40rpx;
					margin-right: 20rpx;
					flex: 0 0 auto;
				}

				.notice-info {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #6A6A6A;
				}

				.right-form {
					flex-grow: 1;

					.hint-text {
						font-size: 22rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #6A6A6A;
						padding: 20rpx 0;
					}
				}
			}
		}
		.price-lines {
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			display: flex;
			align-items: center;
			height: 128rpx;
			background: #FFFFFF;
			padding: 0 29rpx;
			justify-content: space-between;

			// position: absolute;
			// bottom: 0;
			// right: 0;
			// left: 0;
			.prcies {
				font-size: 64rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: bold;
				color: #EF5233;

				text {
					font-size: 28rpx;
					font-weight: normal;
				}
			}

			.reserve-btn {
				background: url('https://qiniu-cdn.maeiyun.com/imgs/lvyou/yuding.png')no-repeat;
				background-size: 100% 100%;
				width: 266rpx;
				height: 87rpx;
				text-align: center;
				line-height: 87rpx;
				font-size: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>